<template>
  <div class="filter_time">
    <el-date-picker
      class="picker_time"
      v-model="state.start_time"
      type="datetime"
      size="small"
      value-format="YYYY-MM-DD HH:mm:ss"
      placeholder="开始时间"
      :disabled-date="beginDateBefore"
      @change="changeStartDate"
    ></el-date-picker>
    <div class="text-center">—</div>
    <el-date-picker
      class="picker_time"
      v-model="state.end_time"
      type="datetime"
      size="small"
      value-format="YYYY-MM-DD HH:mm:ss"
      placeholder="结束时间"
      :disabled-date="beginDateAfter"
      @change="changeEndDate"
    ></el-date-picker>
  </div>
</template>
<script setup lang="tsx">
  import { reactive, ref, watch, computed } from 'vue'

  interface Props {
    modelValue: string[]
  }
  const props = withDefaults(defineProps<Props>(), {
    modelValue: ()=>[]
  })

  const emit = defineEmits(['update:modelValue', 'change'])

  type stateType = {
    start_time: string,
    end_time: string
  }

  const state = reactive<stateType>({
    start_time: '',
    end_time: ''
  })

  const beginDateBefore = (item: any) => {
    let beginDate: string = state.end_time
    if (beginDate) {
      return Date.parse(item) > Date.parse(beginDate)
    }
  }
  const beginDateAfter = (item: any) => {
    let beginDate: string = state.start_time
    if (beginDate) {
      return Date.parse(item) < Date.parse(beginDate)
    }
  }

  const changeStartDate = (val:any)=>{
    
  }

  const changeEndDate = (val:any)=>{
    
  }


</script>
<style scoped lang="scss">
  .filter_time {
      display: inline-flex;
      .text-center {
        margin: 0 5px;
        color: #969696;
      }
      .picker_time {
        :deep .el-input__prefix {
          display: none;
        }
      }
    }
</style>
